<script setup>
import {defineEmits, defineProps, onMounted, ref} from 'vue'
import request from '@/api/request'
import {Plus} from '@element-plus/icons-vue'
import {useRouter} from "vue-router"

let router = useRouter();
let emits = defineEmits(["ref-table"])
let props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})

let data1 = ref([])

let select = () => {
    request({
        url: '/material/Name',
        method: 'get'
    }).then(res => {
        unit1.value = res.data.records
    })

}
select()

let select1 = () => {
    request({
        url: '/classify/Name',
        method: 'get'
    }).then(res => {
        classifyName1.value = res.data.records
    })
}
select1()

let classifyName1 = ref([]);

let unit1 = ref([])

let page = ref({
    current: 1,
    size: 10,
    total: 0,
    records: []
})

function getBoms(materialId) {
    request({
        url: '/bom/boms',
        method: 'get',
        params: {
            materialId: materialId,
        }
    }).then(res => {
        page.value.records = res.data

    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

onMounted(() => {
    getBoms(props.data.materialId)
})

let material = ref({
    ...props.data // 使用父组件传递的数据初始化表单
})


let materials = ref([])
let onSubmit = () => {
    let bom = page.value.records
    request({
        url: '/material/update',
        method: 'put',
        data: material.value
    }).then(res => {
        emits("ref-table")
    })

    request({
        url: '/bom/insert',
        method: 'post',
        data: bom
    }).then(res => {
        emits("ref-table")
    })

}
let loadMaterial = () => [
    request.get('/material/index').then(res => {
        materials.value = res.data;
    })
]
loadMaterial()

let num1 = ref(200)
let num2 = ref(5000)
const handleChange1 = (value = number) => {

}
const handleChange2 = (value = number) => {

}
//选项卡
let title = ref("")
let isVisible = ref(false)
let Material = ref({})

let refTanle1 = (a) => {
    isVisible.value = false;
    page.value.records = a;

}


// 加载数据表格2

let loadData1 = () => {
    request({
        url: '/bom/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            materialId: Material.value.materialId,
        }
    }).then(res => {

        page.value = res.data
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

onMounted(async () => {

})


let toInsertBom = () => {
    title.value = "添加关联商品";
    isVisible.value = true;
    router.push("/material/main/insertBom");
}
let toUpdateBom = async (row) => {
    title.value = "修改关联商品";
    isVisible.value = true;
    if (row != null) {
        data1.value = row;

    } else {
        data1.value = materialId.value[0]

    }
    router.push("/material/main/updateBom");
}


//批量删除
let toRemove = () => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/bom/delete",
            method: "delete",
            data: materialId.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData1()
        })
    })
}
//单删
let toRemoves = (id) => {
    materialId.value = [id]
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/bom/delete",
            method: "delete",
            data: materialId.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData1()
        })
    })
}

function handleChange(val) {

}
</script>

<template>
    <div>
        <el-card>
            <template #header>

            </template>
            <el-form ref="form" :inline="false" :model="material" class="card_wrap" label-width="120px">
                <div class="form-row">
                    <el-form-item class="c_item" label="* 物料编码">
                        <el-input v-model="material.materialId" disabled style="width: 150px;"></el-input>
                        <span class="auto-generate">自动生成</span>
                    </el-form-item>
                    <el-form-item class="c_item" label="* 物料名称">
                        <el-input v-model="material.materialName" style="width: 150px;"></el-input>
                    </el-form-item>
                </div>

                <el-form-item class="c_item_big" label="规格型号">
                    <el-input v-model="material.specificationsAndModels" placeholder="请输入规格型号"
                              style="width: 800px;"></el-input>
                </el-form-item>

                <div class="form-row">
                    <el-form-item class="c_item" label="* 单位">
                        <el-select v-model="material.unit" placeholder="单位" style="width: 150px;">
                            <el-option
                                v-for="intm in unit1"
                                :label="intm.unitName"
                                :value="intm.unitName"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item class="c_item_big" label="物料重量" prop="material_weight">
                        <el-input-number v-model="material.material_weight" :max="10000" :min="1" placeholder="1"/>
                    </el-form-item>

                    <el-form-item class="c_item" label="物料/产品">
                        <el-input v-model="material.materialOrProduct" disabled style="width: 150px;"></el-input>
                    </el-form-item>
                </div>
                <el-form-item class="c_item_big" label="产品成本">
                    <el-input-number v-model="material.cost" :max="10000" :min="0.01" placeholder="0.01"/>
                </el-form-item>
                <div class="form-row">

                    <el-form-item class="c_item" label="所属分类">
                        <el-select
                            v-model="material.category" placeholder=""
                            style="width: 800px;">

                            <el-option
                                v-for="intm in classifyName1"
                                :label="intm.classifyName"
                                :value="intm.classifyName"
                            ></el-option>

                        </el-select>
                    </el-form-item>

                </div>

                <el-form-item class="c_item" label=" 是否启用">

                    <el-radio-group v-model="material.isEnabled">
                        <el-radio :value="0" size="large">是</el-radio>
                        <el-radio :value="1" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item class="c_item" label="是否安全库存">

                    <el-radio-group v-model="material.materialRatio">
                        <el-radio :value="0" size="large">是</el-radio>
                        <el-radio :value="1" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="material.materialRatio===0" label="库存预警值">
                    <el-input-number
                        v-model="material.safetyStock"
                        :max="2000"
                        :min="1"
                        @change="handleChange1"
                    />
                </el-form-item>






                <el-tabs style="width: 100%" type="border-card">
                    <el-tab-pane label="BOM组成">
                        <div style="margin-top: 20px;">
                            <el-button :plain=true icon="Plus" type="primary" @click="toInsertBom">选择物料</el-button>

                        </div>
                        <!-- @selection-change="fuxuankuang" -->
                        <el-table :data="page.records" border>
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column label="产品编码" prop="materialId"></el-table-column>
                            <el-table-column label="物料名称" prop="materialName"></el-table-column>
                            <el-table-column label="物料父级编码" prop="specificationsAndModels"></el-table-column>
                            <el-table-column label="单位" prop="unit"></el-table-column>
                            <el-table-column label="使用比例" prop="materialRatio" width="240">
                                <template #default="{row}">
                                    <el-input-number v-model="row.materialRatio" :max="100" :min="0"
                                                     @change="handleChange"/>
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" prop="remark"></el-table-column>

                        </el-table>
                        <el-pagination v-model:currentPage="page.current"
                                       :page-size="page.size"
                                       :page-sizes="[2, 4, 6, 8, 10]" :total="page.total" background
                                       @current-change="(val) => { page.current = val; loadData() }">
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
                <el-form-item>
                    <el-button class="right-bottom" type="primary" @click="onSubmit">确定修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div style="width:800px">
            <el-dialog v-model="isVisible" :destroy-on-close="true" :title="title" width="60%">
                <router-view :data1="material" @ref-table1="refTanle1">
                </router-view>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
.card-header {
    font-size: 18px;
    font-weight: bold;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100% - 10px) / 2);
    min-width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100% - 10px) / 1);
    min-width: calc((100% - 10px) / 1);
    max-width: calc((100% - 10px) / 1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-row {
    display: flex;
    width: 100%;
}

.auto-generate {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
}

.upload-tip {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}

.bom-actions {
    margin-bottom: 15px;
}

.pagination {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.right-bottom {
    margin-top: 300px;
    margin-left: 100px;
}
</style>